<!DOCTYPE html>
<html>

	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/common.css">
	</head>

	<body>
		<audio src="music/bgm.mp3" id="yy" autoplay="autoplay" loop="loop"></audio>

		<header>
			<img src="img/123.png" alt="" />
			<img src="img/yinyue.gif" / id="yingyue">
			<img src="img/close.png" id="close" alt="" />
			<img src="img/jindu.gif" alt="" />
		</header>
		<content>
			<p></p>
		</content>
		<script type="text/javascript">
			var audi = document.getElementById('yy')
			console.log(audi)

			function format(num) {
				if(num < 10) {
					return "0" + num;
				}
				return num;

			}
			var p = document.querySelector('p')
			console.log(p)
			var num = 0;
			html = '';

			function animal(times, target) {
				var timer = setInterval(function() {
					num++;
					html = num
					//					console.log(html)
					p.innerHTML = format(html) + '%'
					if(num >= target) {
						clearInterval(timer)
						var times = setTimeout(function() {
							location.href = 'index2.html'
						}, 3000)
					}
				}, times)

				console.log(html)

			}
			animal(50, 100)
			var s1
			var s2
			var s3
			var s4
			document.ontouchstart = function(evt) {
				var touch = evt.targetTouches[0];
				s1 = touch.pageX
				s2 = touch.pageY
				//				console.log(s1)
				console.log(s2)
				document.ontouchmove = function(evs) {
					var touch1 = evs.targetTouches[0];
					s3 = touch1.pageX
					s4 = touch1.pageY
					//				console.log(s3)
					console.log(s4)
				}
				//				console.log(s3)
				document.ontouchend = function() {
					//				var touch2=eva.targetTouches[0];
					document.ontouchmove = null;
					var s5 = s4 - s2
					var s6 = s3 - s1
					console.log(s5)
					if(s5 > 300) {
						//					location.href = 'index2.html'
					} else if(s5 < -300) {
						location.href = 'index2.html'
					}
					//				console.log(s6)
					//				if(){
					//					
					//				}

				}
			}
			var close = document.getElementById('close')
			var yingyue = document.getElementById('yingyue')
			yingyue.onclick = function() {
				audi.pause()
				console.log(1)
				yingyue.style.display = 'none'
				close.style.display = 'inline-block'

			}
			close.onclick = function() {
				audi.play()
				//				console.log(1)
				yingyue.style.display = 'inline-block'
				close.style.display = 'none'
			}
		</script>
	</body>

</html>